<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>发送 AJAX 请求</title>
	</head>

	<body>
		<script>
			// 发送 AJAX 请求, 返回的结果是 Promise 对象
			function sendAJAX(url) {
				return new Promise((resolve, reject) => {
					//1. 创建对象
					const x = new XMLHttpRequest();

					//2. 初始化
					x.open("GET", url);

					//3. 发送
					x.send();

					//4. 事件绑定
					x.onreadystatechange = function () {
						if (x.readyState === 4) {
							if (x.status >= 200 && x.status < 300) {
								//成功啦
								resolve(x.response);
							} else {
								//如果失败
								reject(x.status);
							}
						}
					};
				});
			}

			//promise then 方法测试
			// sendAJAX("https://api.apiopen.top/getJoke").then(value=>{
			//     console.log(value);
			// }, reason=>{})

			// async 与 await 测试  axios
			async function main() {
				//发送 AJAX 请求
				let result = await sendAJAX("https://api.apiopen.top/getJoke");
				//再次测试
				let tianqi = await sendAJAX(
					"https://restapi.amap.com/v3/weather/weatherInfo?city=110101&key=b88071c6370c2b600cde3d44dd781aba"
				);

				console.log(tianqi);
			}

			main();
		</script>
	</body>
</html>
